<template>
    <div>
        <input type="text" v-model="msg"
        @keyup.enter="handleEnter(msg)"
        >
        <h1>未完成  {{list.length}}</h1>
        <div v-for="item of list" :key="item.msg">
            <input type="checkbox" :checked="item.done" @click="handleleDebj(item.msg)">
            {{item.msg}}
            <button @click="handleDetail(item.msg)">删除</button>
        </div>
        <h1>已完成  {{done.length}}</h1>
        <div v-for="item of done" :key="item.msg">
            <input type="checkbox" :checked="item.done" @click="handleDeac(item.msg)">
            {{item.msg}}
            <button @click="handleD(item.msg)">删除</button>
        </div>
    </div>
</template>

<script>
export default {
   

    data() {
        return {
            msg:"",
            list:[],
            done:[]
        };
    },

    mounted() {
        var list =localStorage.getItem('list')
        var done =localStorage.getItem('done')
        if(list){
            this.list =JSON.parse(list)
        }if(done){
            this.done =JSON.parse(done)
        }
    },

    methods: {
    handleEnter(msg){
        var list =this.list
        if(!list.includes(msg)){
            list.push({msg,doce:false})
            this.msg =""
            localStorage.setItem('list',JSON.stringify(this.list))
        }else{
            alert("这个数已经添加过了")
            this.msg=""
        }
    },
    handleDetail(val){
        this.list =this.list.filter(item=>{
            return item.msg !==val
        })
        localStorage.setItem('list',JSON.stringify(this.list))
    },
    handleleDebj(val){
        this.list =this.list.filter(item=>{
            if(item.msg ==val){
                item.doce =!item.doce
                this.done.push(item)
            }
            return item.doce ==false
        })
         localStorage.setItem('list',JSON.stringify(this.list))
          localStorage.setItem('done',JSON.stringify(this.done))
    },
    handleD(val){
        this.done =this.done.filter(item=>{
            return item.msg !==val
        })
         localStorage.setItem('done',JSON.stringify(this.done))
        },
        handleDeac(val){
           this.done =this.done.filter(item=>{
            if(item.msg ==val){
                item.doce = !item.doce
                this.list.push(item)
            }
            return item.doce ==true
        })
         localStorage.setItem('list',JSON.stringify(this.list))
          localStorage.setItem('done',JSON.stringify(this.done))
        }
    },
};
</script>

<style lang="scss" scoped>

</style>